body {
    background-image: linear-gradient(to right, rgba(141, 189, 250, 0.4), rgba(199, 145, 255, 0.4));
    font-family: cambria;
    background-attachment: fixed;
}

label {
    text-align: left;
    font-size: 18px;
}

h1 {
    font-size: 80px;
    font-weight: bold;
}

h2 {
    padding-left: 15px;
    font-weight: 600;
}

.form-control:valid {
    background-color: lavender;
}

#download-button{
    display: none;
}

   
#filter {
    padding: 5vh 0;
    background: linear-gradient(89deg, rgba(112,128,144,0.4), rgba(102,205,170,0.4))
}

#filterresult {
    height: 100vh;
    padding-top: 5vh;
}

.btnclass {
    border-radius: 0%;
    /*    background-color: #7A51A1;*/
    border: 0px;
}

.btnclass:hover {
    /*    background-color: #9172EC;*/
    /*        background-color: #7A51A1;*/

    transition: 0s;
    transform: scale(1.03);
}

#banner{
    background: rgb(112,128,120,0.5);
    background-image: url(hlt.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#banner-text{
    background-color: #ffffffcc;
    border-radius: 30px;
    display: block;
    padding: 0;
    font-size: 18px;
    width: 70%;
}

#lab-values {
    background-color: beige;
}

@media (orientation: landscape) {
  /* Cool infinite background scrolling animation.
   * Twitter: @kootoopas
   */
  /* Exo thin font from Google. */
  @import url(https://fonts.googleapis.com/css?family=Exo:100);
  /* Background data (Original source: https://subtlepatterns.com/grid-me/) */
  /* Animations */
  @-webkit-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling-reverse {
    100% {
      background-position: 50px 50px;
    }
  }
  @-webkit-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-moz-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @-o-keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }
  @keyframes bg-scrolling {
    0% {
      background-position: 50px 50px;
    }
  }


  /* Main styles */
  .coolstyle {
    /*margin-top: 13.5rem;*/
    /*color: #999;*/
    font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
    /*text-align: center;*/
    /* img size is 50x50 */
    background: url("") repeat 0 0;
    -webkit-animation: bg-scrolling-reverse 1s infinite;
    /* Safari 4+ */
    -moz-animation: bg-scrolling-reverse 1s infinite;
    /* Fx 5+ */
    -o-animation: bg-scrolling-reverse 1s infinite;
    /* Opera 12+ */
    animation: bg-scrolling-reverse 1s infinite;
    /* IE 10+ */
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
  }
  /*.coolstyle::before {
    font-size: 8rem;
    font-weight: 100;
    font-style: normal;
  }*/
}

@media (orientation: portrait) {
  #filter{
    padding: 0;
  }
}



#banner-text h1{
    padding: 0;
    margin: 0;
    font-size: 60px;
    font-weight: 500;
}

td{
    width: 85%;
}
